<template>
    <span 
      class="tag" 
      :class="[typeClass, sizeClass]"
      :style="customStyle"
    >
      <slot>{{ text }}</slot>
    </span>
  </template>
  
  <script lang="ts" setup>

  const props = defineProps({
    // 标签文字内容
    text: {
      type: String,
      default: ''
    },
    // 标签类型
    type: {
      type: String,
      default: 'default',
      validator(value: string) {
        return ['default', 'primary', 'success', 'warning', 'danger', 'info'].includes(value)
      }
    },
    // 标签大小
    size: {
      type: String,
      default: 'medium',
      validator(value: string) {
        return ['small', 'medium', 'large'].includes(value)
      }
    },
    // 自定义背景颜色
    bgColor: {
      type: String,
      default: ''
    },
    // 自定义文字颜色
    color: {
      type: String,
      default: ''
    }
  });
  
  // 计算类型对应的class
  const typeClass = computed(() => `tag-${props.type}`);
  
  // 计算大小对应的class
  const sizeClass = computed(() => `tag-${props.size}`);
  
  // 自定义样式
  const customStyle = computed(() => ({
    backgroundColor: props.bgColor,
    color: props.color
  }));
  </script>
  
  <style scoped>
  .tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 0 12px;
    font-weight: 500;
    white-space: nowrap;
  }
  
  /* 类型样式 */
  .tag-default {
    background-color: rgba(255, 1, 91, 0.1);
    color: #FF015B;
  }
  
  .tag-primary {
    background-color: #e6f7ff;
    color: #1890ff;
  }
  
  .tag-success {
    background-color: #f6ffed;
    color: #52c41a;
  }
  
  .tag-warning {
    background-color: rgba(255, 153, 41, 0.1);
    color: #FF9929;
  }
  
  .tag-danger {
    background-color: #fff2f0;
    color: #ff4d4f;
    border: 1px solid #ffccc7;
  }
  
  .tag-info {
    background-color: #f0f0f0;
    color: #909399;
    border: 1px solid #d9d9d9;
  }
  
  /* 大小样式 */
  .tag-small {
    height: 34px;
    font-size: 22px;
    line-height: 34px;
  }
  
  .tag-medium {
    height: 44px;
    font-size: 28px;
    line-height: 44px;
  }
  
  .tag-large {
    height: 54px;
    font-size: 34px;
    line-height: 54px;
  }
  </style>